<template>
  <section class="payRule">
    <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" @click="backToIntegralRule">返回</el-button>
      <el-button type="primary" size="medium" @click="newRule">新增</el-button>
    </el-row>
    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="vip_rule_name" label="会员级别" width="120" v-if="ruleType==='add_vip'"/>
			<el-table-column prop="word_fraction" label="单项分" width="150"/>
			<el-table-column prop="money" label="价值" width="200" v-if="ruleType==='donate'"/>
      <el-table-column prop="remark" label="备注" width="200"/>
			<el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editorRule(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini"  @click="delIntegralChildRule(scope.row.id)">删除</el-button>
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<!-- <div class="page-code"><el-pagination background layout="prev, pager, next" :total="50"></el-pagination></div> -->
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      height="50%"
      center
      :title="dialogTit"
      class="editor-dialog"
      @close="initData"
      >
      <el-form :label-position="'left'" label-width="130px" >
        <el-form-item label="会员级别" prop="level"  v-if="ruleType==='add_vip'">
							<el-select v-model="addForm.level" placeholder="请选择">
								<el-option
									v-for="item in levelOptions"
									:key="item.id"
									:label="item.name"
									:value="item.id"
									>
								</el-option>
							</el-select>
						</el-form-item>
        <el-form-item label="单项分">
          <el-input v-model="addForm.score" type="number"></el-input>
        </el-form-item>
        <el-form-item label="兑换积分价值" v-if="ruleType==='donate'">
          <el-input v-model="addForm.present" placeholder="输入相应价值，对应相应积分"  type="number"></el-input>
          <div></div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="dialogVisible = false">取消</el-button> -->
        <el-button type="primary" @click="setIntegralChildRule">提交</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			users:[],
      dialogTit:'',
      dialogVisible:false,//编辑状态的弹窗
      addForm:{//弹窗的信息
        level:'',//会员等级
        score:'',//单项分,
        present:'',//积分比例
        remark:'',
        id:''
      },
      levelOptions: [],
      ruleId:'',//父规则的id
      ruleType:''//父规则的类型
		}
  },
  methods: {
    columnChange(e){
      //选中筛选类别
      this.dropColumnName=e
    },
     newRule(){
      //新增
      this.dialogTit='新增';
      this.dialogVisible = true;
    },
    editorRule(id){
      this.dialogTit='编辑';
      this.dialogVisible = true;
      this.addForm.id=id;
      this.getIntegralChildRuleDetail()
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    },
    async setIntegralChildRule(){
      //新建，编辑规则
      const res=await this.$api.setIntegralChildRule({
        integral_rule_id:this.ruleId,
        word_fraction:this.addForm.score,//单项分
        vip_rule_id:this.addForm.level,
        money:this.addForm.present,
        remark:this.addForm.remark,
        id:this.addForm.id
      })
      if(res.data.level=='success'){
						this.getIntegralChildRuleList();
						this.$message({
							type: 'success',
							message: res.data.message
            });
            this.dialogVisible=false
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
    },
    async getIntegralChildRuleDetail(){
      const res=await this.$api.getIntegralChildRuleDetail({
        id:this.addForm.id
      })
      if(res.data.level=='success'){
        const data=res.data.data
          this.addForm.level=+data.vip_rule_id;
          this.addForm.score=data.word_fraction;
          this.addForm.present=data.money;
          this.addForm.remark=data.remark;
      }
    },
    async getUserVipRule(){
            //获取会员等级&缴费规则接口
            const data=await this.$api.getUserVipRule();
            if(data.data.level=='success'){
                this.levelOptions= data.data.data.vip_list
            }
    },
    delIntegralChildRule(id){
			//删除缴费规则
			const judge= this.$confirm('删除积分子规则?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.delIntegralChildRule({id});
					if(res.data.level=='success'){
						this.getIntegralChildRuleList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
    },
    async getIntegralChildRuleList(){
      //获取积分子规则列表
      const res=await this.$api.getIntegralChildRuleList({
        integral_rule_id:this.ruleId
      })
      if(res.data.level=='success'){
        this.users=res.data.data
      }
    },
    
    backToIntegralRule(){
      this.$router.push('IntegralRule')
    },
    initData(){
      this.addForm={//弹窗的信息
        level:'',//会员等级
        score:'',//单项分,
        present:'',//积分比例
        remark:'',
        id:''
      }
    }
  },
  mounted() {
    this.getUserVipRule();
    if(!isNaN(this.$route.query.id)){
      this.ruleId=this.$route.query.id;
      this.ruleType=this.$route.query.type;
      this.getIntegralChildRuleList()
    }
    },
}
</script>
<style lang='scss' scoped>
  .payRule{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .payRule .el-dialog__body{overflow: auto;}
</style>
